<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="TingGe Blog Agile agile JavaScript NodeJS">
  <meta name="author" content="TingGe<505253293@163.com>">
  <title>听歌实验室</title>
  <link type="image/x-icon" rel="shortcut icon" href="https://avatars3.githubusercontent.com/u/4074517?v=3&s=40" />
  <link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css" media="screen">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="/css/landing-page.css" rel="stylesheet">
  <link href="/css/screenshots.css" rel="stylesheet">
  <style media="screen">
    #main {
      padding-top: 55px;
    }
  </style>
  <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/lib/html2canvas/dist/html2canvas.min.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand topnav" href="/">
          <i class="fa fa-flask icon-3x" aria-hidden="true"></i> 听歌实验室
        </a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="/html/js.html">JavaScript/NodeJS</a>
          </li>
          <li>
            <a href="/index.html#agile">敏捷/项目管理(Agile/PMP)</a>
          </li>
          <li>
            <a href="/html/cloud-bi.html">云商业智能(Cloud BI)</a>
          </li>
          <li>
            <a href="/html/iot.html">物联网(WoT/IoT)</a>
          </li>
          <li>
            <a href="/html/me.html">关于我</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <div id="main" class="container">
    <div class="row">
      <div id="article" class="col-md-9 content-container">
        <h1 id="html5-">html5时代</h1>
<p>[TOC]</p>
<h2 id="-">特性</h2>
<p>从标记语言到 Web Application</p>
<ul>
<li>Connectivity</li>
<li>Performance &amp; Integration</li>
<li>Web Socket/SharedWorker</li>
<li>Web worker</li>
<li>Geolocation</li>
</ul>
<h3 id="semantics">Semantics</h3>
<h4 id="-">布局</h4>
<p>header\nav\article\section\aside\footer</p>
<h4 id="-">表单</h4>
<ul>
<li>datalist</li>
<li>input 类型 color\calendar\date\Datetime-local\Email\Time\Url\Range\Telephone\Number\Search</li>
<li>input 属性 autocomplete</li>
<li>output</li>
<li><p>command</p>
</li>
<li><p>keygen</p>
</li>
</ul>
<h4 id="-">文本</h4>
<p>wbr、ruby</p>
<h3 id="multimedia">Multimedia</h3>
<ul>
<li>audio</li>
<li>video</li>
</ul>
<pre><code class="lang-html">&lt;video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;&gt;
  &lt;source src=&quot;forrest_gump.mp4&quot; type=&quot;video/mp4&quot; /&gt;
  &lt;source src=&quot;forrest_gump.ogg&quot; type=&quot;video/ogg&quot; /&gt;
  &lt;track kind=&quot;subtitles&quot; src=&quot;subs_chi.srt&quot; srclang=&quot;zh&quot; label=&quot;Chinese&quot;&gt;
  &lt;track kind=&quot;subtitles&quot; src=&quot;subs_eng.srt&quot; srclang=&quot;en&quot; label=&quot;English&quot;&gt;
&lt;/video&gt;
</code></pre>
<h3 id="graphics-3d-effects">Graphics，3D &amp; Effects</h3>
<ul>
<li>Canvas</li>
</ul>
<p>SVG 与 Canvas 区别</p>
<table>
<thead>
<tr>
<th>SVG</th>
<th>Canvas</th>
</tr>
</thead>
<tbody>
<tr>
<td>这个就好像绘制和记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示</td>
<td>Canvas就像绘制和忘记，一旦绘制完成你不能访问像素和操作它</td>
</tr>
<tr>
<td>SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，用户就想去操作它</td>
<td>Canvas在绘制和忘却的场景例如动画和游戏是良好的</td>
</tr>
<tr>
<td>因为为了之后的操作，需要记录坐标，所以比较缓慢</td>
<td>因为没有记住以后事情的意向，所以更快</td>
</tr>
<tr>
<td>我们可以用绘制对象的相关事件处理</td>
<td>我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考</td>
</tr>
<tr>
<td>分辨率无关</td>
<td>分辨率相关</td>
</tr>
</tbody>
</table>
<ul>
<li><p>Web动画</p>
<p>requestAnimationFrame</p>
</li>
</ul>
<h3 id="css3-styling">CSS3 ／ Styling</h3>
<ul>
<li><p>CSS选择器（: not(.input)：所有 class 不是“input”的节点）</p>
</li>
<li><p>圆角（border-radius）</p>
</li>
<li><p>多列布局（multi-column layout）</p>
</li>
<li><p>阴影和反射（Shadow\Reflect）</p>
</li>
<li><p>文字特效（text-shadow）</p>
</li>
<li><p>文字渲染（text-decoration\text-overflow）<code>text-overflow:ellipsis;</code></p>
</li>
<li><p>线性渐变（gradient）</p>
</li>
<li><p>旋转（transform）</p>
</li>
<li><p>增加了旋转,缩放,定位,倾斜,动画，多背景（transform: rotate | scale | skew | translate |matrix）</p>
<p><code>transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation</code></p>
</li>
<li><p><a href="/lab/fullpage.html">translation</a></p>
</li>
</ul>
<h3 id="device-access">Device Access</h3>
<ul>
<li><a href="/lab/webrtc-app/index.html">WebRTC</a></li>
</ul>
<h3 id="offline-storage">Offline &amp; Storage</h3>
<ul>
<li>Manifest：缓存机制，而不是离线存储。</li>
<li><a href="/lab/filesystem/index.html">FileSystem API</a></li>
<li>localStorage &amp; sessionStorage（注意与 cookie 的区别、基于storage事件的页面通信）</li>
<li>indexDB</li>
<li>webSQL</li>
<li>ServiceWorker API (caches)：控制缓存的技术</li>
<li>ETags：控制缓存的技术</li>
</ul>
<h2 id="-">参考</h2>
<ol>
<li><a href="http://www.html5rocks.com/zh/tutorials/file/filesystem/">探索 FileSystem API</a></li>
<li><a href="http://blog.meathill.com/tech/js/html5-file-reader-file-writer.html">HTML5的File API应用</a></li>
<li><a href="http://www.w3cfuns.com/notes/17770/8da9b817b82e5f1b00555dc6cf79f26e">canvas选取图像局部放大</a></li>
<li><a href="http://qianduan.guru/2016/08/13/gesture_detection_in_html5/">HTML5 手势检测原理和实现</a></li>
<li><a href="http://www.cnblogs.com/onepixel/p/5300445.html">H5单页面手势滑屏切换原理</a></li>
<li><a href="http://www.webhek.com/requestanimationframe/">HTML5探秘：用requestAnimationFrame优化Web动画</a></li>
<li><a href="https://webgazer.cs.brown.edu/">在视屏应用（webcam）中眼球跟踪的JS库 WebGazer.js </a></li>
<li><a href="http://www.techug.com/40-important-html-5-interview-questions-with-answers">HTML5中40个最重要的技术点</a></li>
<li><a href="http://www.webhek.com/javascript-cache-api">Javascript缓存API</a></li>
</ol>

      </div>
      <div class="col-md-3" style="padding-top:20px;">
        <iframe src="http://githubbadge.appspot.com/tingge?a=0" style="border: 0;height: 142px;width: 200px;overflow: hidden;" frameBorder="0"></iframe>
      </div>
    </div>
  </div>
  <a id="html2canvas" title="截图下载-快照">&nbsp;</a>
  <script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/js/article.js" charset="utf-8"></script>
  <!-- justice.js https://github.com/okor/justice  -->
  <script src="/lib/justice.min.js" charset="utf-8"></script>
  <!-- instantclick -->
  <script src="/lib/instantclick.js" charset="utf-8"></script>
  <script type="text/javascript" data-no-instant>
    Justice.init();
  </script>
</body>

</html>
